<template>
  <div>
    <el-dialog title="订单详情" :visible.sync="dialogTableVisible" class="dialog">
      <div class="order-info">
        <h3>订单信息</h3>
        <ul>
          <li v-for="(item, index) of dataInfo" :key="index">
            <span>{{item.title}}</span>
            <span>{{item.content}}</span>
          </li>
        </ul>
      </div>
      <div class="order-info">
        <h3>商品信息</h3>
        <ul>
          <li v-for="(item, index) of goodsInfo" :key="index">
            <span>{{item.title}}</span>
            <span>{{item.content}}</span>
          </li>
        </ul>
      </div>
      <div class="order-info">
        <h3>收货人信息</h3>
        <ul>
          <li v-for="(item, index) of goodsInfo" :key="index">
            <span>{{item.title}}</span>
            <span>{{item.content}}</span>
          </li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getOrderInfo} from '@/api/operation'
import {ERR_OK} from '@/api/config'
export default {
  props: {
    order_id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dataInfo: [
        {
          title: "订单号：",
          content: "123456"
        },
        {
          title: "用户：",
          content: "易小姐"
        },
        {
          title: "支付方式：",
          content: "微信支付"
        },
        {
          title: "下单时间：",
          content: "2016-5-5"
        },
        {
          title: "使用优惠券：",
          content: "-100"
        },
        {
          title: "应付总金额：",
          content: "1000"
        }
      ],
      goodsInfo: [
        {
          title: "班级课程：",
          content: "萌芽班"
        },
        {
          title: "价格：",
          content: "1000"
        },
        {
          title: "下单类型：",
          content: "半个月"
        },
        {
          title: "总价：",
          content: "60"
        }
      ],
      dialogTableVisible: false
    };
  },
  methods: {
    _getOrderInfo(order_id) {
      getOrderInfo(order_id)
        .then((res) => {
          if (res.code == ERR_OK) {
            console.log(res)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  },
  watch: {
    order_id(newVal) {
      // console.log(newVal)
      this._getOrderInfo(newVal)
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog /deep/ .el-dialog__title {
  font-size: 14px !important;
  font-weight: bold;
}
.order-info {
  width: 98%;
  height: 110px;
  margin-top: 30px;
  color: #444;
  &:nth-of-type(2) {
    height: 60px;
  }
  &:nth-of-type(3) {
    height: 60px;
  }
  h3 {
    font-size: 14px;
    margin: 0;
  }
  ul {
    background-color: #f5f5f5;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 auto;
    li {
      margin-right: 50px;
      width: 17%;
      white-space: nowrap;
      &:last-child {
        color: red;
      }
    }
  }
}
</style>